<template>
    <div class="hello">
        <template>
            <div>
                <a-button type="primary">
                    Primary
                </a-button>
                <a-button>Default</a-button>
                <a-button type="dashed">
                    Dashed
                </a-button>
                <a-button type="danger">
                    Danger
                </a-button>
                <a-config-provider :auto-insert-space-in-button="false">
                    <a-button type="primary">
                        按钮
                    </a-button>
                </a-config-provider>
                <a-button type="primary">
                    按钮
                </a-button>
                <a-button type="link">
                    Link
                </a-button>
            </div>
        </template>

        <a-form-model layout="inline" :model="formInline" @submit="handleSubmit" @submit.native.prevent>
            <a-form-model-item>
                <a-input v-model="formInline.user" placeholder="Username">
                    <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
                </a-input>
            </a-form-model-item>
            <a-form-model-item>
                <a-input v-model="formInline.password" type="password" placeholder="Password">
                    <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                </a-input>
            </a-form-model-item>
            <a-form-model-item>
                <a-button type="primary" html-type="submit"
                    :disabled="formInline.user === '' || formInline.password === ''">
                    Log in
                </a-button>
            </a-form-model-item>
        </a-form-model>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        data() {
            return {
                formInline: {
                    user: '',
                    password: '',
                },
            }
        },
        methods: {
            handleSubmit(e) {
                console.log(e);
                console.log(this.formInline);
            },
        },
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h3 {
        margin: 40px 0 0;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: inline-block;
        margin: 0 10px;
    }

    a {
        color: #42b983;
    }
</style>